<script setup>
import { ref, reactive, onMounted } from "vue";

import serviceApi from "@/api/modules/lawyer.js"
const qualityLawyerList = reactive([])
const getQualityLawyer = async () => {
  let res = await serviceApi.getQualityLawyer()
  if (res.code === 1) {
    // Object.assign(qualityLawyerList, res.data)
    qualityLawyerList.push(...res.data)
  }
  // console.log(qualityLawyerList, "22222asdas ");


}
onMounted(() => {
  getQualityLawyer()
})
</script>

<template>
  <div class="Mian  ">
    <div class="lawyerModule">
      <div class="lawyerModule_title">
        优选律师
      </div>
      <!-- 幻灯片 -->
      <div class="carousel">
        <el-carousel :interval="5000" arrow="always" indicator-position="none">
          <el-carousel-item>
            <div class="card_box">
              <el-card shadow="never" v-for="(item, index) in qualityLawyerList" :key="index">
                <div class="carousel_Card">
                  <div>
                    <el-image
                      style="width: 100%; height: 234px;border-top-right-radius: 5px;border-top-left-radius: 5px"
                      :src="item.img" />
                  </div>
                  <!-- <div v-if="index === 2" class="carousel_Card_Info_issue">
                    <div class="Card_Info">
                      <span class="name">{{ item.name }}</span>
                      <span class="lawyer">{{ item.practice }}｜{{ item.address }}</span>
                    </div>
                    <div class="button_info">
                      <div class="details">
                        <span>详情</span>
                      </div>
                      <div class="entrust">
                        <span>委托</span>
                      </div>
                      <div class="sendMessages">
                        <span>发消息</span>
                      </div>
                    </div>
                  </div> -->
                  <!-- v-else -->
                  <div class="carousel_Card_Info">
                    <span class="name">{{ item.name }}</span>
                    <span class="lawyer">{{ item.practice }}｜{{ item.address }}</span>
                  </div>
                </div>
              </el-card>
            </div>
          </el-carousel-item>
        </el-carousel>
        <div class="carousel_but flex-center">
          <el-button color="#0052d9">更多律师</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.Mian {
  width: 1920px !important;
  margin: 0 auto;
}

.lawyerModule {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  .lawyerModule_title {
    margin: 50px 0 20px 0;
    width: 112px;
    height: 50px;
    font-size: 28px;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: Medium;
    text-align: center;
    color: #181818;
    line-height: 50px;

  }

  .carousel {
    width: 1450px;
    height: 100%;
    // .el-carousel {
    //   padding: 0 80px;

    //   .el-carousel-item {
    //     padding: 0 80px;
    //   }
    // }
    .carousel_Card {
      width: 298px;
      // height: px;
      height: 374px;
      // background: linear-gradient(180deg, #f0f3f7, #ffffff);
      // border: 2px solid #ffffff;
      border-radius: 10px;
      background-color: #fff;
      box-shadow: 0px 10px 20px -2px rgba(0, 0, 0, 0.08);
    }





    .card_box {
      // padding: 0 50px;
      display: flex;
      // justify-content: space-around;
      justify-content: center;
      align-items: center;
    }

    .carousel_Card_Info {
      // width: 298px;
      height: 130px;
      display: flex;
      background-color: #fff;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      // padding: 30px;
      border-top-right-radius: 5px;
      border-top-left-radius: 5px;

      .lawyer {
        margin-top: 20px;
        width: 197px;
        height: 22px;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: Regular;
        text-align: center;
        color: #646770;
        line-height: 22px;
      }

      .name {
        width: 72px;
        height: 22px;
        font-size: 24px;
        font-family: PingFang SC, PingFang SC-Medium;
        font-weight: Medium;
        text-align: left;
        color: #202020;
        line-height: 22px;
      }
    }

    .carousel_Card_Info_issue {
      color: #fff;
      // margin-bottom: -45px;
      position: relative;
      top: -10px;
      height: 150px;
      display: flex;
      background-color: #004CD1;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      // padding: 30px;
      border-radius: 5px;
      padding: 0;

      // margin: 0;
      .button_info {
        margin-top: 20px;
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        text-align: center;
        line-height: 27px;

        .sendMessages {
          width: 96px;
          height: 30px;
          background: #ffffff;
          border-radius: 2px;
          box-shadow: 0px 2px 8px 0px rgba(213, 218, 227, 0.50);
          cursor: pointer;

          span {
            width: 36px;
            height: 17px;
            font-size: 12px;
            font-family: PingFang SC, PingFang SC-Regular;
            font-weight: Regular;
            text-align: left;
            color: #0052d9;
            line-height: 17px;
          }
        }

        .entrust {
          width: 60px;
          height: 30px;
          border: 1px solid #ffffff;
          border-radius: 2px;
          box-shadow: 0px 2px 8px 0px rgba(213, 218, 227, 0.50);
          cursor: pointer;

          span {
            width: 24px;
            height: 17px;
            font-size: 12px;
            font-family: PingFang SC, PingFang SC-Regular;
            font-weight: Regular;
            text-align: left;
            color: #ffffff;
            line-height: 17px;
          }
        }

        .details {
          width: 60px;
          height: 30px;
          border: 1px solid #ffffff;
          border-radius: 2px;
          box-shadow: 0px 2px 8px 0px rgba(213, 218, 227, 0.50);
          cursor: pointer;

          span {
            width: 24px;
            height: 17px;
            font-size: 12px;
            font-family: PingFang SC, PingFang SC-Regular;
            font-weight: Regular;
            text-align: left;
            color: #ffffff;
            line-height: 17px;
          }
        }
      }

      .Card_Info {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .lawyer {
          margin-top: 20px;
          width: 197px;
          height: 22px;
          font-size: 14px;
          font-family: PingFang SC, PingFang SC-Regular;
          font-weight: Regular;
          text-align: center;
          color: #fff;
          line-height: 22px;
        }

        .name {
          width: 72px;
          height: 22px;
          font-size: 24px;
          font-family: PingFang SC, PingFang SC-Medium;
          font-weight: Medium;
          text-align: left;
          color: #fff;
          line-height: 22px;
        }
      }

    }

    .carousel_but {
      margin: 40px 0 50px 0;

      .el-button {
        width: 140px;
        height: 44px;
        // background: #0052d9;
        border-radius: 4px;

        span {
          width: 64px;
          height: 22px;
          font-size: 16px;
          font-family: PingFang TC, PingFang TC-Regular;
          font-weight: Regular;
          text-align: left;
          color: #ffffff;
          line-height: 22px;
        }
      }

    }
  }
}
</style>
